<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

</script>

<template>
  <h1>测试卡片</h1>
  <div class="bg-slate-800 rounded-xl p-8 md:flex md:p-0">
    <img
      class="w-24 h-24 rounded-full mx-auto md:w-48 md:h-auto md:rounded-none"
      src="https://tailwind.docs.73zls.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
    />
    <div class="pt-6 text-center space-y-4 md:p-8 md:text-left">
      <p class="text-lg font-medium text-zinc-100">这是使用 tailwindcss 实现的一个基础的卡片区域，Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis repellendus deleniti est? Quod nisi doloremque vero veniam, blanditiis aliquam accusamus animi dolorum sunt veritatis adipisci mollitia obcaecati odit eveniet?</p>
      <div class="font-medium flex flex-col">
        <a class="text-sky-400">carrieryu</a>
        <a class="text-slate-500" href="https://tailwindcss.com/docs/container" target="_blank">tailwindcss</a>
        <a class="text-slate-500" href="https://adamwathan.me/css-utility-classes-and-separation-of-concerns/" target="_blank">CSS Utility Classes and "Separation of Concerns"</a>
      </div>
    </div>
  </div>

  <div class="my-card">
    <img
      src="https://tailwind.docs.73zls.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
    />
    <div class="desc-content">
      <p class="desc">这是使用 <b>scss</b> 实现的一个基础的卡片区域，Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque blanditiis repellendus deleniti est? Quod nisi doloremque vero veniam, blanditiis aliquam accusamus animi dolorum sunt veritatis adipisci mollitia obcaecati odit eveniet?</p>
    <div class="more">
      <a class="my-link" href="">carrieryu</a>
      <a class="tailwindcss-link" href="https://tailwindcss.com/docs/container" target="_blank">tailwindcss</a></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.my-card {
  display: flex;
  background-color: rgba(30,41,59, 1);
  margin-top: 20px;
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  text-align: start;

  img {
    width: 12rem;
    height: auto;
  }

  .desc-content {
    display: flex;
    flex-direction: column;
    align-items: start;
    color: rgba(244,244,245,1);
    padding: 32px;

    .desc {
      margin-bottom: 25px;
      font-weight: 500;
      font-size: 18px;
    }

    .more {
      display: flex;
      flex-direction: column;
      color: rgba(56, 189, 248,1);
      width: 100%;

      .tailwindcss-link {
        color: rgba(100, 116, 139,1);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .my-card {
    flex-direction: column;
    border-radius: 10px;
    align-items: center;
    padding: 2rem;
    text-align: center;

    img {
      border-radius: 100%;
      width: 6rem;
      height: 6rem;
    }

    .more {
    
    }
  }
}
</style>
